<template>
  <div class="main">
    <div class="areaTop-mainVisual">
      <div class="areaTop-mainVisual__img">
        <img src="../../../public/img/tripdetail/jinianguan1.jpg" width="100%" alt="纪念馆" />
      </div>
      <div class="top_title">
      <h1 class="areaTop-mainVisual_caption">八一纪念馆</h1>
      </div>
    </div>
    <div class="areaTop-breadcrumb l-innerspace-S">
      <div class="areaTop-breadcrumb__list c-breadcrumb">
        <a href="#" class="c-breadcrumb__list">首页</a>
        <a href="#" class="c-breadcrumb__list">南昌著名景点</a>
        <a href="#" class="c-breadcrumb__list">红色足迹</a>
        <span class="c-breadcrumb__list">八一起义纪念馆</span>
      </div>
    </div>
    <div class="fixed"><img src="../../../public/img/tripdetail/zhanshi.gif"></div>
    <div class="l-container --center">
      <div class="c-unit --bd-0 ui-toggle areaTop-overview">
        <div class="areaTop-overview__head">
          <h2 class="areaTop-overview__head-ttl">八一起义纪念馆的概要．<span style="color:#ae2921;">历史</span></h2>
          <div class="l-row introduce">
            <div class="l-col">
              <img
                src="../../../public/img/tripdetail/qiyi.jpg"
                class="areaTop-overview__img"
                alt="八一纪念馆的概要．历史"
              />
            </div>
            <div class="l-col-13 --grow --maxw-100">
              <p class="l-space-b-none">
                南昌八一起义纪念馆位于老城区中心，现由新馆和旧馆两处建筑组成，旧馆是南昌起义指挥部旧址，新馆是近年扩建的陈列大楼。这里也是人们来到南昌必去的红色景点之一。
                <br />纪念馆是免费的，凭身份证领票即可进馆参观，因此周末和节假日可能会遇到排队和领不到票的情况。进入馆区，首先引入眼帘的是铜雕，它的右侧的灰色建筑是旧馆，南昌起义总指挥部旧址，铜雕正后方为陈列大楼。整体面积不大，步行游览即可。
                <br />首先前往新馆的陈列大楼参观，序厅正中有一座名为“石破天惊”的雕塑，一只有力的大手从崩裂的石块中伸出，紧扣着汉阳造步枪的扳机，其中一块石块上刻着起义打响的时刻。这尊雕塑也是纪念馆的标志，许多游人在此留影。
                <br />纪念馆的基本陈列分为危难中奋起、伟大的决策、南征下广东、转战上井冈等部分，顺着参观路线依次游览即可。馆内大约每半小时会有一场免费讲解，跟着讲解员你会对那段历史有更清晰的了解。
                <br />馆内陈列的展品从当年起义用的刀枪弹药到衣物、望远镜等，另外值得一提的是，展馆内有不少多媒体模型，蜡像和雕塑在声光的配合下格外逼真，枪炮声、冲锋声回响在耳畔，攻打敌人指挥部、五万人欢庆胜利等场面栩栩如生。
                <br />从陈列馆出来，继续参观旁边的八一起义总指挥部旧址，这是一座五层的灰色大楼，也就是原来的江西大旅社。如果你翻开历史课本，一定能在南昌起义这一章找到这幢中西合璧的回形建筑的图片。1927年7月下旬，起义部队到南昌，包租下这间旅舍作为起义指挥中心。
                <br />如今里面按当年起义时的原样布置供游人参观，入口处的石碑上“军旗升起的地方”，点名了这里的历史意义。在此可以看到诸如缴获的战利品、乃至根据旅社老工人的回忆复原的餐厅、客房等等，还展出着一些起义时使用过的原物。
                <br />当年这些陈设看起来十分普通，可以感受当年革命时清贫的环境和条件。每天都有不少人来此参观，遥想当年全国各地的精英在此同仇敌忾，力挽狂澜的场景，事隔多年依然能让人心潮澎湃。
                <br />八一起义纪念馆周边是一片比较繁华的商业区，参观完毕可以在周边的餐馆用餐，以及去北面的胜利路步行街逛逛。
                <br />
              </p>
              <div class="more_introduce">
                <a href="">更多</a>
              </div>
            </div>
          </div>
        </div>

        <div class="c-group --align-c l-space-t-XL">
          <div class="c-group__body areaTop__sns">
            <div class="c-group__item">
              <a
                href="#"
                class="i-sns-icon --sns--wechat --size--36 c-modal-btn js-c-modal-btn"
                data-modal-name="wechat"
                data-measurement="lj_pc_areas_share_wechat"
                target="_blank"
              >
              </a>
            </div>
            <div class="c-group__item">
              <a
                href="#"
                class="i-sns-icon --sns--weibo --size--36"
                data-measurement="lj_pc_areas_share_weibo"
                target="_blank"
              ></a>
            </div>
            <div class="c-group__item">
              <a
                href="#"
                class="i-sns-icon --sns--qq --size--36"
                data-measurement="lj_pc_areas_share_qzone"
                target="_blank"
              ></a>
            </div>
          </div>
        </div>
        <div class="l-row searchBox --align-center l-space-t-L">
          <div class="l-col">
            <a href="#" class="c-btn --primary --min-size-S --ico c-ico --mono-base-arrow">搜索视频</a>
          </div>
          <div class="l-col">
            <a href="#" class="c-btn --primary --min-size-S --ico c-ico --mono-base-arrow">搜索文章</a>
          </div>
        </div>
      </div>

      <div class="c-unit">
        <div class="l-row --align-middle l-space">
          <div class="l-col l-space-r-S">
            <span class="c-ico --circle-base-tour --size-L"></span>
          </div>
          <div class="l-col">
            <h2>
              <span class="t-h1" >基本陈列</span>
            </h2>
          </div>
        </div>
        <h2 class="l-space history">
          <span class="t-h2 t-color-primary" style="color:#ae2921;">历史进程展区</span>
        </h2>

        <div data-tabtarget class="l-space-M">
          <div data-tabtargetlist="1" >
            <ul class="live-info__new l-s-row l-space-b-n">
              <li 
              class="l-s-col-6 l-space-b"
              v-for="item in $store.state.history"
              :key="item.name"
              >
                <div class="c-thumb">
                  <a href="#" class="showdetail">
                    <div class="c-thumb__img live-info__new-img">
                      <span>
                        <img :src="item.path" width="308" height="160" :alt="item.name" />
                      </span>
                    </div>
                  </a>
                </div>
                <div class="l-space-XS">
                  <a href="#">
                    <div class="t-h2 t-over-ellipsis">{{item.name}}</div>
                  </a>
                  <ul class="c-tag l-space-S-li">
                    <li class="c-tag__item" v-for="w in item.keywords" :key="w.word">
                      <a href="#">{{w.word}}</a>
                    </li>
                </ul>
                  <a href="#" class="t-size-M t-h3">{{item.note}}</a>
                  <div class="t-size-S t-color-secondary">——{{item.date}}</div>
                </div>
              </li>


            </ul>
          </div>
        </div>

        <div class="l-space">
          <h2>
            <span class="t-h2 t-color-primary">特殊场址</span>
          </h2>
        </div>
        <ul class="l-s-row l-space-b-n specialsite" >
          <li class="l-s-col-4an1ov2 l-space-b"  v-for="item in $store.state.display" :key="item.name">
            <div class="c-thumb">
              <div class="c-thumb__ico --righttop">
                <span class="c-ico-live-body --dir-b">
                  <span class="c-ico --live"></span>
                </span>
              </div>
              <a href="#" class="c-thumb__area">
                <div class="c-thumb__img">
                  <div class="u-trim">
                    <img :src="item.path" width="100%" :alt="item.name" />
                  </div>
                </div>
                <div class="c-thumb__interaction --whiteout">
                  <div class="c-thumb__captionArea --dark">
                    <div class="t-line-clamp-row-2">
                      <span class="">{{item.name}}</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </li>
          <li class="l-s-col-4an1ov2 l-space-b" >
            <div class="c-thumb">
              <div class="c-thumb__ico --righttop">
                <span class="c-ico-live-body --dir-b">
                  <span class="c-ico --live"></span>
                </span>
              </div>
              <a href="#" class="c-thumb__area">
                <div class="c-thumb__img">
                  <div class="u-trim">
                    <video  class="bayivideo" controls="controls">
                            <source src="/video/bayi.mp4" type="video/mp4" />
                    </video>
                  </div>
                </div>
                <div class="c-thumb__interaction --whiteout">
                  <div class="c-thumb__captionArea --dark">
                    <div class="t-line-clamp-row-2">
                      <span class="">攻打敌总指挥部，带你进入VR世界</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <section class="under-live">
        <div class="--center">
          <div data-tabrange class="c-unit">
            <div class="l-space-L">
              <h3>
                <span class="t-color-primary t-h2">革命记忆</span>
              </h3>

              <div class="l-space-S">
                <ul class="live-info__pickup l-s-row l-space-b-n">
                  <li 
                  class="l-s-col-4an1ov2 l-space-b"
                  v-for="(item, index)  in $store.state.memorys"
                  :key="item.name"
                   >
                    <a class="c-thumb" href="#" v-if=" index<8 ">
                      <div class="c-thumb__img --radius">
                        <div class="for-img">
                          
                        <img :src="item.path" width="250" height="140" :alt="item.name" />
                        </div>
                      </div>
                      <div class="c-thumb__interaction --overlay --radius">
                        <div class="c-thumb__captionArea --center --size-L">
                          <div class="t-size-L">{{item.name}}</div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="review">
          <div class="l-space">
            <h2>
              <span class="t-h2 ">往期精彩展览回顾</span>
            </h2>
          </div>
          <ul class="l-s-row l-space-b-n display2" >
            <li 
            class="l-s-col-4an1ov2 l-space-b"
            v-for="item in $store.state.display2" 
            :key="item.name">
              <div class="c-thumb">
                <a href="#" class="c-thumb__area">
                  <div class="c-thumb__img">
                    <div class="u-trim">
                      <img :src="item.path" width="100%" :alt="item.name" />
                    </div>
                  </div>
                  <div class="c-thumb__interaction --whiteout">
                    <div class="c-thumb__captionArea --dark">
                      <div>
                        <span class="t-line-clamp-row-2">{{item.name}}</span>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <div class="nearplay">
        <div class="l-row --align-middle l-space-M">
          <div class="l-col l-space-r-S --float">
            <span class="c-ico-live-body --size-M --dir-b--center">
              <span class="c-ico --live"></span>
            </span>
          </div>
          <h2 class="l-col">
            <span class="t-h1">附近推荐</span>
          </h2>
        </div>

        <ul class="l-s-row l-space-b-n nearplay-ul">
          <li 
          class="l-s-col-6 l-space-b"  
          v-for="item in $store.state.play" 
          :key="item.name">
            <div class="c-card">
              <div class="c-card__img l-space-b-XS">
                <a href="#">
                  <img width="100%" :src="item.path" :alt="item.name" />
                </a>
              </div>
            </div>
            
            <div class="c-card">
              <div class="c-card__summary">
                <div class="c-card__caption">
                  <a href="#">{{item.name}}</a>
                </div>
                <ul class="c-tag l-space-S-li">
                    <li class="c-tag__item" v-for="w in item.keywords" :key="w.word">
                      <a href="#">{{w.word}}</a>
                    </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>

        <div class="l-space-XL l-dir-c">
          <div class="moreplay">
          <a href="#" class="c-btn --primary --min-size-M --ico c-ico --mono-base-arrow">更多</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "../../store/index";
export default {
  store
};
</script>

<style  scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  margin: 0 auto;
}
a {
  color: #666;
}
.areaTop-mainVisual {
  width: 100%;
  padding-top:60px;
  position: relative;
}
.top_title{
  position: absolute;
  width: 100%;
  bottom: 20%;
}
.areaTop-mainVisual__img{
  width: 100%;
  height: auto;
}
.areaTop-mainVisual_caption {
  color: rgb(240, 236, 16);
  font-size: 4.5rem;
  font-weight: bold;
  text-align: center;
  font-family: '华文行楷';
}
.areaTop-breadcrumb__list {
  background-color: #f3efee;
}
.areaTop-breadcrumb__list a,
.areaTop-breadcrumb__list span {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1.5rem;
  margin: 10px;
  color: #666;
}
.areaTop-breadcrumb__list a::after {
  content: ">";
  display: inline-block;
  position: relative;
  left: 8px;
}
.areaTop-breadcrumb__list a:nth-of-type(3),
.areaTop-breadcrumb__list span {
  color: crimson;
}
.fixed{
  position: fixed;
  top: 90px;
  left: 80%;
  z-index: 10;
}
.fixed img{
  width:100%;
}
.l-container {
  width: 80%;
  margin: 0 auto;
}
.areaTop-overview {
  margin: 30px 0;
}
.areaTop-overview__head-ttl {
  margin: 20px 0;
  font-family: '华文中宋';
}
.areaTop-overview__img {
  width: 30%;
  height: auto;
}
.introduce {
  margin: 20px 0;
  position: relative;
}
.l-col-13 {
  display: inline-block;
  width: 60%;
  position: absolute;
  top: 0;
  left: 35%;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}
.l-space-b-none {
  overflow: auto;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  background-color: white;
}
.more_introduce {
  display: block;
  line-height: 1.5rem;
  text-align: center;
  margin-top: 20px;
}
.searchBox{
    margin-bottom: 30px; 
    text-align: center;
}
.searchBox div{
    display: inline;
}
.searchBox div a{
    display: inline-block;
    padding:10px 40px;
    border:solid #aaa 1px;
    margin:0 10px;
}
.searchBox div a::after {
  content: ">";
  display: inline-block;
  position: relative;
  left: 30%;
  font-family: "黑体";
  color: black;
  font-weight: bolder;
}
.l-space-t-XL{
  margin-top: 50px;
  margin-bottom: 20px;
}
.areaTop__sns{
  width: 20%;
  margin:0 auto
}
.c-group__item{
  display: inline-block;
  margin: 0 8% ;
  width: 36px;
}
.c-group__item a::before{
    content: "";
    background-size: 40px 36px;
    width: 40px;
    height: 36px;
    display: inline-block;
}   
.c-group__item:nth-child(1) a::before{
  background-image: url(../../../public/img/tripdetail/weibo.png); 
}
.c-group__item:nth-child(2) a::before{
  background-image: url(../../../public/img/tripdetail/wechat.png); 
}
.c-group__item:nth-child(3) a::before{
  background-image: url(../../../public/img/tripdetail/QQ.png); 
}
.--align-middle{
  margin-top:50px;
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-family: "华文中宋";
}
.history{
  margin: 20px 0;
  font-family: "华文中宋";
}
.t-color-primary{
  font-family: "华文中宋";
  color: crimson;
}
.live-info__new{
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.live-info__new li{
  width: 45%;
  margin: 10px 0;
}

.live-info__new-img img{
  width: 100%;
  height: auto;
}
a.t-size-M.t-h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    height:0;
}
.l-space-M{
  margin: 20px 0;
}
.specialsite{
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
}
.specialsite li{
  width: 30%;
  margin: 10px 0;
}
.specialsite li:not(:nth-child(3n)) {
    margin-right: calc(10% / 2);
}
.live-info__pickup{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  -webkit-box-pack: justify;
}
.live-info__pickup li{
  width: 23%;
  margin: 10px 0;
}
.live-info__pickup li img{
  margin:0 auto;
  width:100%;
  border-radius: 8px;
}
.live-info__pickup li .c-thumb__img{
  position: relative;
}
.for-img::after{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: rgb(133, 133, 133);
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
}
.live-info__pickup li a:hover .for-img::after{
  transition: opacity 2s ease-in-out;
  opacity: 0;
}
.live-info__pickup li a:hover .for-img{
  border-radius: 8px;
  overflow:hidden;
}
.live-info__pickup li a:hover .for-img img{
  transition: transform 2s ease-in-out;
  transform:scale(1.3);
}
.c-thumb__interaction.--overlay.--radius {
    position: relative;
    top: -80px;
    color: white;
    font-family: "黑体";
}
.live-info__pickup li a:hover .c-thumb__interaction.--overlay.--radius{
  transition: opacity 3s;
  opacity: 0;
}
.display2{
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
}
.display2 li{
  width: 30%;
  margin: 10px 0;
}
.display2 li img{
  width: 100%;
  height: auto;
}
.display2 li:not(:nth-child(3n)) {
    margin-right: calc(10% / 2);
}
.nearplay-ul{
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.nearplay-ul>li{
  width: 18%;
  margin: 10px 0;
}
.l-space-S-li{
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  align-items: flex-start;
}
.l-space-S-li li{
  width: auto;
  line-height: 1.4;
  background-color: #f0f0f0;
  margin-right: 12px;
  padding: 3px 6px;
  margin-top: 5px;
  font-size: .75rem;
  border-radius: 10px;
}
.l-space-XS .l-space-S-li li{
  background-color: #ecdfbc;
}
.l-space-S-li li:nth-of-type(1){
  font-size: 13px;
  font-weight: bold;
}
.l-space-XS{
  background-color: rgb(236, 235, 232);
  padding: 10px;
}
.t-over-ellipsis{
  color: rgb(206, 18, 55);
  font-size: 1.3rem;
  font-family: '黑体';
  font-weight: bold;
}
.t-size-S.t-color-secondary{
  font-family:'黑体';
  margin:10px  0;
  text-align: right;
}
.l-space-L{
  margin:20px 0; 
}
.l-space-L {
  text-align: center;
}
.t-line-clamp-row-2{
  text-align:center;
}
.l-space-XL.l-dir-c{
  margin:20px 0;
}
.moreplay {
    display: block;
    border: 1px solid black;
    padding: 7px 10px;
    width: 15%;
    margin: 0 auto;
    text-align:center;
    position:relative;
    font-size:.9rem;
}
.moreplay::after {
    content: '>';
    font-size:1rem;
    display: block;
    width: 15%;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 75%;
    font-family: '黑体';
    font-weight: bolder;
}
.live-info__new li:hover a.t-size-M.t-h3{
  transition:height 2s;
  height:85px;
}
video.bayivideo {
    width: 100%;
}
</style>